<template>
  <div class="user-list-page">
    <div class="navbar">
      <ul>
        <li><router-link to="/">返回主页面</router-link></li>
      </ul>
    </div>
    <div class="content">
      <div class="filter-section">
        <h2>Filter Users</h2>
        <form @submit.prevent="applyFilters" class="filter-form">
          <div class="form-group">
            <label for="name">姓名:</label>
            <input type="text" id="name" v-model="filters.name">
          </div>
          <div class="form-group">
            <label for="id">ID:</label>
            <input type="text" id="id" v-model="filters.id">
          </div>
          <div class="form-group">
            <label for="email">Email:</label>
            <input type="email" id="email" v-model="filters.email">
          </div>
          <button type="submit" class="btn-filter">查询</button>
        </form>
      </div>

      <div class="user-list">
        <h2>User List</h2>
        <table>
          <thead>
          <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>Email</th>
            <th>操作</th> <!-- 新增操作列 -->
          </tr>
          </thead>
          <tbody>
          <tr v-for="user in filteredUsers" :key="user.id">
            <td>{{ user.id }}</td>
            <td>{{ user.username }}</td>
            <td>{{ user.email }}</td>
            <td>
              <button @click="editUser(user.id)" class="btn btn-edit">编辑</button>
              <button @click="confirmDelete(user.id)" class="btn btn-delete">删除</button>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import { useRouter } from 'vue-router';

export default {
  data() {
    return {
      filters: {
        name: '',
        id: '',
        email: ''
      },
      users: []
    };
  },
  computed: {
    filteredUsers() {
      return this.users.filter(user => {
        return (
            (!this.filters.name || user.username.includes(this.filters.name)) &&
            (!this.filters.id || user.id.toString().includes(this.filters.id)) &&
            (!this.filters.email || user.email.includes(this.filters.email))
        );
      });
    }
  },
  methods: {
    fetchUsers() {
      axios.get('/api/users')
          .then(response => {
            this.users = response.data;
          })
          .catch(error => {
            console.error('Failed to fetch users:', error);
          });
    },
    applyFilters() {
      // 在此处调用筛选逻辑或重新请求数据
    },
    editUser(userId) {
      // 导航到用户编辑页面，可以传递用户ID以便在页面加载时获取用户信息
      this.$router.push({ path: `/edit-user/${userId}` });
    },
    confirmDelete(userId) {
      if (confirm("Are you sure you want to delete this user?")) {
        this.deleteUser(userId);
      }
    },
    deleteUser(userId) {
      axios.delete(`/api/users/${userId}`)
          .then(() => {
            this.fetchUsers(); // 删除后刷新用户列表
          })
          .catch(error => {
            console.error('Failed to delete user:', error);
          });
    }
  },
  created() {
    this.fetchUsers();
  }
};
</script>

<style scoped>
.user-list-page {
  display: flex;
  height: 100vh;
}

.navbar {
  width: 250px;
  background-color: #007bff;
  padding: 20px;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

.navbar ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.navbar ul li a {
  text-decoration: none;
  color: #ffffff;
  display: block;
  padding: 10px;
  border-radius: 4px;
}

.content {
  flex: 1;
  padding: 20px;
  background-color: #f8f9fa;
}

.filter-section {
  margin-bottom: 20px;
}

.filter-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.form-group {
  margin-bottom: 10px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
}

.form-group input {
  padding: 8px;
  box-sizing: border-box;
}

.btn-filter {
  margin-top: 10px;
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.user-list table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* 设置固定表格布局 */
}

.user-list th, .user-list td {
  padding: 8px;
  text-align: center; /* 将内容居中显示 */
}

.user-list th {
  background-color: #f2f2f2;
}

.user-list th:nth-child(1),
.user-list td:nth-child(1) {
  width: 20%; /* 设置 ID 列宽度 */
}

.user-list th:nth-child(2),
.user-list td:nth-child(2) {
  width: 20%; /* 设置 Name 列宽度 */
}

.user-list th:nth-child(3),
.user-list td:nth-child(3) {
  width: 40%; /* 设置 Email 列宽度 */
}

.user-list td {
  text-align: center;
}

.btn-edit {
  background-color: #28a745; /* 绿色 */
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 5px;
}

.btn-delete {
  background-color: #dc3545; /* 红色 */
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-edit:hover,
.btn-delete:hover {
  opacity: 0.8; /* 悬停时稍微降低透明度 */
}
</style>

